<template>
  <view>
    <view class="main">
      <view class="coupon_box" v-if="list.length > 0">
        <coupon-item v-for="(item, index) in list" :key="index" v-bind:item="item" theme="#ff0000"></coupon-item>
      </view>
      <u-empty v-else mode="coupon"> </u-empty>
    </view>
  </view>
</template>

<script>
import couponItem from "../../components/coupon-item/coupon-item.vue"
import PageInfo from '../../utils/pageutils.js'
import { couponList } from '../../common/api/index.js'
export default {
  components: { couponItem },
  data() {
    return {
      list: [],
      pageInfo: new PageInfo(),
    }
  },
  created() {
    this.getList()
  },
  methods: {
    useCoupon(coupon) {
      console.log(`使用优惠券: ${coupon.amount}元`)
      // 这里可以添加逻辑处理优惠券的使用
    },
    onPullDownRefresh() {
      this.refresh()
    },
    onReachBottom() {
      this.loadMore()
    },
    // 刷新
    refresh() {
      this.pageInfo.reset()
      this.list = []
      this.status = 'loading'
      this.getList()
    },
    // 加载更多
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = 'loading'
        this.pageInfo.nextPage()
        this.getList()
      } else {
        this.status = 'noMore'
      }
    },
    // 列表
    getList() {
      let userId = uni.getStorageSync('USER_ID')
      let params = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        userId: userId,
      }
      console.log('params', params)
      couponList(params)
        .then((result) => {
          console.log('result', result)
          const list = result.data.data || []
          const total = result.data.total
          this.list = [...this.list, ...list]
          this.pageInfo.total = total
          this.pageInfo.loadedTotal = this.list.length
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = 'more'
            } else {
              this.status = 'noMore'
            }
            uni.stopPullDownRefresh()
          }, 200)
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 30rpx;
}

.coupon-list {
  display: flex;
  flex-direction: column;

  gap: 10rpx;
}

.coupon-item {
  position: relative;
  width: 100%;
  height: 200rpx;

  background-image: radial-gradient(circle at 9px 8px,
      transparent 0%,
      transparent 8px,
      #e15852 8px,
      #e15852 100%);

  background-position: 233rpx -8rpx;
  background-size: 100% 192rpx;
}

.coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.coupon-header .amount {
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
}

.divider {
  width: 1rpx;
  height: 100%;
  background-color: #ffffff;
  border-style: dotted;
  border-width: 1rpx;
  border-color: #ffffff;
  margin: 10rpx 0;
  position: absolute;
  top: -20rpx;
  right: 442rpx;
}

.coupon-body .valid-date,
.coupon-body .rules {
  margin-bottom: 5rpx;
}

.coupon-footer button {
  width: 100%;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  cursor: pointer;
}
</style>
